* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

h1 {
    font-size: 24px;
    color: #776e65;
}

//定义animate方块变大的形式
@keyframes bounce {
    0% {
        transform: scale(1);
    }
    70% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

//计算数值
@function pow($base, $exponents) {
    @if $exponents==0 {
        @return 0;
    }
    $raised: 1;
    @for $i from 1 through $exponents {
        $raised: $raised * $base;
    }
    @return $raised;
}

$bgcolor-array: ( rgba(238, 228, 218, 0.35), #faf8ef, #eee1c9, #f3b27a, #f69664, #f77c5f, #f75f3b, #edd073, #edcc62, #edc950, #edc53f, #edc22e, // 2048
);
.playground {
    display: flex;
    flex-wrap: wrap;
    width: 300px;
    height: 300px;
    margin: auto;
    background: #bbada0;
    user-select: none;
    cursor: grab;
    >.card-row {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: 25%;
        >.card {
            width: 25%;
            height: 100%;
            font-size: 30px;
            font-weight: bold;
            padding: 5px;
            >.card-grid {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%;
                color: #776e65;
                //移动时放大方块0.2秒 且只放大一次
                &.bounce {
                    animation: bounce 0.2s ease-in 1;
                }
                //scss遍历颜色列表 不同数值方块不同色
                @for $i from 1 through length($bgcolor-array) {
                    &[data-value='#{pow(2, $i - 1)}'] {
                        background: nth($bgcolor-array, $i);
                        @if pow(2, $i - 1)>=32 {
                            color: #f9f6f2;
                        }
                    }
                }
            }
        }
    }
}